<template>
  <div>
    <div class="echarts-content">
      <div class="echarts-card">
        <ringVue
          :data="institutionData"
          :name="institutionName"
          :names="institutionNames"
          :text="institutionText"
          :left="institutionLeft"
        ></ringVue>
      </div>
      <div class="echarts-card">
        <ringVue
          :data="resultData"
          :name="resultName"
          :names="resultNames"
          :text="resultText"
          :left="resultLeft"
        ></ringVue>
      </div>
      <div class="echarts-card">
        <ringVue
          :data="lifeData"
          :name="lifeName"
          :names="lifeNames"
          :text="lifeText"
          :left="lifeLeft"
        ></ringVue>
      </div>
    </div>
  </div>
</template>

<script>
import ringVue from './ring-echarts.vue';
export default {
  components: {
    ringVue,
  },
  data() {
    return {
      institutionData: [
        { value: 1048, name: '财务' },
        { value: 735, name: '工程' },
        { value: 580, name: '审计' },
        { value: 484, name: '其他' },
      ],
      resultData: [
        { value: 1048, name: '30-50岁' },
        { value: 735, name: '50岁以上' },
        { value: 580, name: '30岁以下' },
      ],
      lifeData: [
        { value: 1048, name: '11年以上' },
        { value: 735, name: '3-10年' },
        { value: 484, name: '2年以上' },
      ],
      institutionText: '专业机构',
      resultText: '年龄结果',
      lifeText: '审计工作年限',
      institutionName: ['财务', '工程'],
      institutionNames: ['审计', '其他'],
      resultName: ['30-50岁', '50岁以上'],
      resultNames: ['30岁以下'],
      lifeName: ['11年以上', '3-10年'],
      lifeNames: ['2年以上'],
      institutionLeft: 'center',
      resultLeft: '6%',
      lifeLeft: '8%',
    };
  },
};
</script>

<style scoped lang="scss">
.echarts-content {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .echarts-card {
    width: 200px;
    height: 298px;
    background-image: url('@/assets/images/home/statistical-board/ring.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 20px;
  }
}
</style>
